<template>
  <div class="relative-position full-height full-width bg-white">
    <div v-if="isUser && hasDBPerm">
      <div class="row data-center-header items-center justify-center q-pl-lg">
        <div class="col-2 data-center-header-time">
          {{currentTime | dateAndTime}}
        </div>
        <div class="col-8 data-center-header-title text-center">
          {{`人工智能互联互通开源评测平台数据运行情况${data.DashboardName ? ` (${data.DashboardName})` : ''}`}}
        </div>
        <div class="col-2 data-center-header-to-full">
          <!-- <q-btn class="float-right"
            flat icon="fullscreen"
            @click="goFullScreen()"></q-btn> -->
        </div>
      </div>
      <div class="hgap"></div>
      <div class="absolute-full column"
        style="margin-top: 64px;border-radius: 5px;">
        <div class="row">

        <div
            class="welcome-info absolute-center column full-width full-height items-center
              justify-center"
            style="padding-bottom: 100px;"
          >
            <div class="welcome-title q-mb-md">欢迎您来到</div>
            <div
              class="welcome-caption"
              caption
            >人工智能互联互通开源评测平台</div>
          </div>
        </div>

        <!-- <div class="row justify-center items-center">
          <q-btn
            class="q-mt-xl"
            @click="goFullScreen()"
            label="点击查看详情数据大盘" flat style="color: #01ffff;background-color: #01ffff1f"></q-btn>
        </div> -->
      </div>
    </div>
    <div
        v-else
        class="welcome-info column full-width full-height items-center
          justify-center"
      >
        <div class="welcome-title q-mb-md">欢迎您来到</div>
        <div
          class="welcome-caption"
          caption
        >人工智能互联互通开源评测平台</div>
      </div>
  </div>
</template>

<script>
import { canI } from '@/utils/api';

export default {
  name: 'homePage',
  components: {
  },
  data() {
    return {
      hasDBPerm: false,
      data: {
        count: {},
      },
    };
  },
  created() {
  },
  mounted() {
    this.setFontSize();

    window.addEventListener('resize', this.setFontSize, false);
  },
  computed: {
    currentTime() {
      return new Date();
    },
    isUser() {
      if (!this.ctx.modules.passport) return true;

      return this.ctx.modules.passport.store.state.passport.user
        && !!this.ctx.modules.passport.store.state.passport.user.Name;
    },
  },
  methods: {
    setFontSize() {
      // let { clientWidth } = document.documentElement;
      // clientWidth = clientWidth < 1200 ? 1200 : clientWidth;
      // document.getElementsByTagName('html')[0].style.cssText
      // = `font-size:${clientWidth / 40}px !important`;
    },
    onMapAreaChanged(c) {
      if (this.hasDBPerm) {
        this.getRequest(`/dashboard/home?code=${c}`).then((d) => {
          this.data = (d && d.data) || {};
        });
      }
    },
    goFullScreen() {
      if (this.fullWindowOpened) return;

      let fulls = 'left=0,screenX=0,top=0,screenY=0,scrollbars=0,channelmode=1,fullscreen=1,menubar=0,status=0,titlebar=0,toolbar=0,location=0';
      if (window.screen) {
        const ah = window.screen.availHeight - 30;
        const aw = window.screen.availWidth - 10;
        fulls += `,height=${ah}`;
        fulls += `,innerHeight=${ah}`;
        fulls += `,width=${aw}`;
        fulls += `,innerWidth=${aw}`;
        fulls += ',resizable=0';
      } else {
        // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
        fulls += ',resizable=1';
      }

      this.fullWindow = window.open('/admin/dashboard', 'name', fulls);
      // 判断左屏还是右屏
      // 1000是根据自己环境来设定的，应该有更好的方式。
      if (window.screen.availLeft > -1) {
        this.fullWindow.moveTo(-1000, 0);
      } else {
        this.fullWindow.moveTo(1000, 0);
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setFontSize);
  },
};
</script>

<style lang="sass" scoped>
.data-center-header
  height: 47px
  border-radius: 5px
  &-time
    font-size: 14px
    font-weight: 400
    color: #858484
  &-title
    font-size: 16px
    font-weight: bold
    color: #5E6883
  &-to-full
    .q.btn
      border-radius: 5px
      font-size: 14px
      font-weight: normal
.hgap
  height: 16px
  background: $bodyBackground

.welcome-info
  background: rgba(0, 0, 0, 0)
  // margin-top: 40px
  padding: 0
  .welcome-title
    color: $primary !important
    opacity: 0.8
    font-size: 48px
    font-weight: bold
    color: rgba(93,178,190,1)
  .welcome-caption
    font-size: 16px
    font-weight: 400
    color: #acacac
</style>

<style lang="sass">
.app-layout-root-admin-home
  .admin-main-bread-crumbs
    display: none
    & + .hgap
      display: none
</style>
